import React from 'react';
import PropTypes from 'prop-types';

import BaseComponent from '../../components/common/baseComponent.js';
import { inWechat } from '../../utils/wechat';
// import toast from '../../utils/toast.js';
import shLogo from '../../../assets/images/station/logo_sh.png';
import shellLogo from '../../../assets/images/station/logo_shell.png';
import icLocation from '../../../assets/images/station/ic_location@2x.png';
import { OilStation } from '../../models/oilStation';
import { debounced } from '../../utils/func';

class StationCell extends BaseComponent {
  static propTypes = {
    station: PropTypes.instanceOf(OilStation),
    type: PropTypes.oneOf(['list', 'map']),
    openNav: PropTypes.func.isRequired,
    canRefuel: PropTypes.bool.isRequired,
    refuelFunc: PropTypes.func,
    currentStation: PropTypes.instanceOf(OilStation),
    single: PropTypes.bool,
  }

  static defaultProps = {
    single: false,
  }

  clickTel = () => {
    const { station } = this.props;
    if (station.get('phone')) {
      window.location.href = `tel:${station.get('phone')}`;
    }
  }

  clickNav = debounced(() => {
    const { station } = this.props;
    if (inWechat() && window.wx && station.get('lat')) {
      window.wx.ready(() => {
        window.wx.openLocation({
          latitude: Number(station.get('lat')), // 纬度，浮点数，范围为90 ~ -90
          longitude: Number(station.get('lng')), // 经度，浮点数，范围为180 ~ -180。
          name: station.get('name'), // 位置名
          address: station.get('address'), // 地址详情说明
          scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
          // infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
      });
    } else if (!station.get('lat')) {
      console.error('该油站没有坐标');
    } else {
      const { openNav } = this.props;
      openNav(station);
    }
  }, 500)

  render() {
    const {
      station, canRefuel, refuelFunc, single, currentStation,
    } = this.props;
    let cls = 'station-cell';
    if (currentStation && currentStation.get('id') === station.get('id')) {
      cls = `${cls} active`;
    }

    if (single) {
      cls = `${cls} single`;
    }

    // let telView;
    // if (station.get('phone')) {
    //   telView = <i className="iconfont icon-tel" onClick={this.clickTel} />;
    // }
    // let navView;
    // if (station.get('lat')) {
    //   navView = <i className="iconfont icon-nav menu-icon" />;
    // }

    let refuelView;

    if (canRefuel) {
      refuelView = (
        <div className="cell-menu" onClick={() => refuelFunc(station)}>
          <div className="payBtnBox">
            <div className="payBtn">
              支付
            </div>
          </div>
        </div>
      );
    }

    const cellView = (
      <div className={cls}>
        <div className="logoBox" onClick={this.clickNav}>
          <img alt="" className="logo" src={station.get('mchId') === '66' ? shellLogo : shLogo} />
        </div>
        <div className="cell-body" onClick={this.clickNav}>
          <div className="title-row">
            <div>{station.get('name')}</div>
          </div>
          <p className="text">{station.get('address')}</p>
          <div className="location">
            <img alt="" className="ic_location" src={icLocation} />距离您{station.getKm()}
          </div>
        </div>
        {refuelView}
      </div>
    );
    let view;
    if (currentStation && currentStation.get('id') === station.get('id')) {
      view = (
        <div className={`current-station${cls.indexOf('single') >= 0 ? ' single' : ''}`}>
          <p className="station-view">您当前位于：<span className="station">{station.get('name')}</span></p>
          {cellView}
        </div>
      );
    } else {
      view = cellView;
    }
    return view;
  }
}

export default StationCell;
